  <!-- 通用导航 -->
  <el-header th:fragment="header">
    <section th:replace="~{components/common-loader::loader}"></section>

    <section class="common-header">
      
    <!-- 侧边弹出菜单 -->
    <el-drawer class="drawer" title="我是标题" v-model="drawer" th:with="menu = ${menuFinder.getPrimary()}"
    size="55%" :with-header="false" style="position: absolute;">


    <a th:each="menuItem : ${menu.menuItems}" th:if="${menuItem.children.size() == 0}" th:href="@{${menuItem.spec.href}}">
    <section class="menu-item item-title" th:text="${menuItem.spec.displayName}">11</section>
    </a>

    <!-- 有子项 -->
    <el-collapse v-model="activeName" accordion >
      
    <el-collapse-item 
    th:each="menuItem, state : ${menu.menuItems}" th:if="${menuItem.children.size() > 0}" 
    th:attr="title = ${menuItem.spec.displayName}, name = ${state.index}" 
    >
    <a th:each=" item : ${menuItem.children}"  th:href="@{${item.spec.href}}">
    <section class="sub-item" th:text="${item.spec.displayName}"></section>
    </a>

  </el-collapse-item>
  </el-collapse>

  <el-divider><i class="bi bi-link-45deg"></i></el-divider>

  <section class="other-links">
    <a th:href="@{/tags}">
      <el-tag size="medium" effect="plain" type="info"><i class="bi bi-journal-text"></i>标签云</el-tag>
    </a>
    <!-- <a th:href="@{/tags}">
     <el-tag size="medium" effect="plain" type="info"><i class="bi bi-tags"></i>最近文章</el-tag>
    </a> -->
  </section>
  
  
  </el-drawer>
  <!-- 侧边弹出菜单结束 -->

  <!-- 站点名称 -->
  <a th:href="@{'/'}">
    <section class="site-title">
    <span th:text="${site.title}"></span>
    </section>
  </a>

  <div class="nav hidden-md-and-down" >


    <el-menu 
    th:with="menu = ${menuFinder.getPrimary()}"
    mode="horizontal"
    background-color="#24292F" text-color="white"
    > 

    <span th:each="menuItem,state : ${menu.menuItems}">

    <!-- 页面链接 -->
    <a th:if="${menuItem.children.size() == 0}" th:href="@{${menuItem.spec.href}}">
    <el-menu-item th:attr="index=${state.index}"><span th:text="${menuItem.spec.displayName}"></span></el-menu-item>
    </a>

    <!-- 下拉菜单开始 -->
    <el-sub-menu  
    th:if="${menuItem.children.size() > 0}"
    th:attr="index=${state.index}">
    <template #title ><span th:text="${menuItem.spec.displayName}"></span></template>
    <a th:each=" item : ${menuItem.children}" th:href="@{${item.spec.href}}">
    <el-menu-item><span  th:text="${item.spec.displayName}"></span></el-menu-item>
    </a>
    </el-sub-menu>
    <!-- 下拉菜单结束 -->

    </span>
   
    </el-menu>
    
  
  </div>

  <section class="menu-btn hidden-lg-and-up" @click="drawer = true"><i class="bi bi-justify"></i></section>
    </section>
  
    </el-header>